import React from 'react';
import { observer, inject } from 'mobx-react';
import { WeaErrorPage,WeaTools, WeaLocaleProvider } from 'ecCom';
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import * as _ from '../../util/common';
import '../../style/formResource.less';
import CommunicationRichText from './CommunicationRichText';
import ContentItem from './ContentItem';
import { message, Pagination} from 'antd';

const getLabel = WeaLocaleProvider.getLabel;

@observer
class MyContentList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
    }

    componentDidMount() {
        const { WfFormCommunicationStore } = this.props;
        WfFormCommunicationStore.reflashContentList();
    }

    render(){
        const { WfFormCommunicationStore, commonParam } = this.props;
        const { contentList = [], status = {} } = WfFormCommunicationStore;
        return (
           <div>
             {contentList.length > 0 ? <div className="wea-workflow-communication-list">
                {
                    contentList.map((content,index) => {
                        return <ContentItem ecId={`${this && this.props && this.props.ecId || ''}_ContentItem@w96fmv@${index}`} 
                            appStatus={WfFormCommunicationStore.appStatus} 
                            contentInfo={content} 
                            submit={this.submit} 
                            operate={WfFormCommunicationStore.operateCommunication}
                        />
                    })
                }
                <div className="wea-workflow-communication-pagination">
                    <Pagination ecId={`${this && this.props && this.props.ecId || ''}_Pagination@31bo7c`} 
                        onChange={this.pageChange} 
                        showSizeChanger 
                        onShowSizeChange={this.pageSizeChange} 
                        total={status.total} 
                        showTotal={total => `${getLabel(18609, '共')+total+getLabel(18256, '条')}`} 
                        pageSize={status.pageSize} 
                        current={status.currentPage} 
                        showQuickJumper={true}
                    />
                </div>
             </div> : 
             <div style={{borderBottom : 0, marginTop : 20}} className="ant-table-placeholder">
                <i className="anticon anticon-frown"></i>
                <sapn>{getLabel(83553, '暂无数据')}</sapn>
            </div>
            }
           </div>
        )
    }

    pageChange = (page, pageSize) => {
        const { WfFormCommunicationStore } = this.props;
        const { setState, reflashContentList } = WfFormCommunicationStore;
        setState({currentPage : page});
        reflashContentList({currentPage : page});
    }

    pageSizeChange = (current, size) => {
        const { WfFormCommunicationStore } = this.props;
        const { setState, reflashContentList } = WfFormCommunicationStore;
        setState({pageSize : size, currentPage : current});
        reflashContentList({pageSize : size, currentPage : current});
    }

    submit = (params, callback) => {
        if (!params.remark) {
          message.error(getLabel(382648, '请输入交流内容'));
          return false;
        }
        const {WfFormCommunicationStore} = this.props;
        if(params.replyType == "edit") {
            WfFormCommunicationStore.editContent(params, callback);
        } else {
            WfFormCommunicationStore.saveReply(params, callback);
        }
      }


}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@7d4r5j`} msg={ props.error ? props.error : getLabel(383324,'对不起，该页面异常，请联系管理员')} />,
    {error: ""}
)(MyContentList);